<template>
	<div id="all">
		<div style="clear: both;"></div>
		<div id="content">
			<div class="a1">
				<img class="big" :src="'/products/' + product.xqImg">
			</div>
			<div class="a2">
				<h2>{{product.productName}}</h2>
				<div class="a21">
					<div class="a211">
						<span class="color">售价</span>
						<span class="prices">￥{{product.price}}</span>
						<span class="shic">市场价<span class="prices2">￥{{product.marketPrice}}</span></span>
						<span class="yis">已售{{product.Sold}}件</span>
					</div>
					<div class="a22">
						<p></p>
						<span class="color">材料</span>
						<span class="neir">{{product.Material}}</span>
						<p></p>
						<span class="color">包装</span>
						<span class="neir">{{product.packing}}</span>
						<p></p>
					</div>
					<div class="a23">
						<p></p>
						<span class="color">配送说明</span>
						<p>{{product.ShippingInstructions}}</p>
						<span class="color">说明</span>
						<p>{{product.explain}}</p>
					</div>
					<div class="a25">
						<button class="a25color2" type="danger" @click="addCarts">加入购物车</button>
					</div>
				</div>
			</div>
		</div>
		<div id="xq_Img" style="width:1200px;margin:0 auto">
			<img src="../../public/products/xq_1.jpg" alt="" style="width:1200px;margin:100px auto">
			<img src="../../public/products/xq_2.jpg" alt="">
			<img src="../../public/products/xq_3.jpg" alt="">
			<img src="../../public/products/xq_4.jpg" alt="">
			<img src="../../public/products/xq_5.jpg" alt="">
			<img src="../../public/products/xq_6.jpg" alt="">
		</div>
		<div class="commentShow">
			<el-col :span="20" v-for="(comment, index) in comments" :key="comment.id" style="margin-bottom: 40px;">
				<el-descriptions direction="vertical" :column="6" border>
					<el-descriptions-item label="姓名">{{comment.name}}</el-descriptions-item>
					<el-descriptions-item label="评论时间">{{comment.commentTime}}</el-descriptions-item>
					<el-descriptions-item label="评论内容">{{comment.content}}</el-descriptions-item>
				</el-descriptions>
			</el-col>
		</div>


	</div>
</template>
  
<script>

export default {
	name: 'detail',
	data() {
		return {
			product: {},
			comments: {}
		}
	},

	methods: {
		addCarts() {
			this.axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
			this.axios.post('/api/addCart', { product: this.product })
				.then(res => {
					this.$message('加入购物车成功！')
				})
				.catch(err => {
					this.$message('加入购物车失败')
				})
		}
	},

	created() {
		let pid = this.$route.query.productId
		this.axios.get('/api/getAllProducts')
			.then(res => {
				this.product = res.data.data.find(data => {
					return data.id == pid
				})
				let id = this.product.id
				this.axios.get('/api/getComments', { params: { id } })
					.then(res => {
						this.comments = res.data.data
					})
			});

		// let _id = this.$route.query.commentId
	}
}
</script>
<style scoped>
.commentShow{
	position: relative;
	/* bottom: 300px; */
	overflow: hidden;
	left: 10%;
	margin-bottom: 300px;
}
.product {
	width: 1200px;
	margin: 10px auto;
}

.left {
	border: 0px solid #ccc;
	width: 400px;
}

.right {
	flex: 1;
	text-align: left;
	padding-left: 20px;
}

.cartBtn {
	margin-left: 80%;
	width: 188px;
	height: 55px;
}

.all {
	width: 100%;
	height: 810px;
	padding-bottom: 50px;
	margin-top: -80px;
	margin-bottom: 1px;
}

.all .content {
	margin-top: 0px;
	float: left;
}

#content {
	/* 	border: 1px solid red; */
	width: 1200px;
	margin-top: -80px;
	margin-bottom: 120px;
	margin: auto;
}

#content .a1 {
	float: left;
	margin-left: 10px;
}

#content .a1 .big {
	/* float: left; */
	width: 450px;
	height: 400px;
	position: relative;
	top: 30px;
}

#content .a11 ul li {
	list-style: none;
	float: left;
	margin: 20px 15px;
}

.a11 ul li img {
	border: 3px white solid;
	width: 80px;
	height: 80px;
}

.a11 ul li img:hover {
	border: 3px #FF4F0D solid;
}

.a2 {
	float: left;
	margin-left: 90px;
}

.a21 .color {
	color: #758188;
}

.a21 .a211 {
	background-color: #F2F5F8;
	color: #758188;
}

.a21 .a211 .prices,
.shic {
	margin-left: 40px;
}

.a21 .a211 .prices {
	color: #FF4F0D;
	font-size: 35px;
	font-weight: bold;
}

.a21 .a211 .prices2 {
	text-decoration: line-through;
}

.a21 .a211 .yis {
	margin-left: 230px;
}

.a22 {
	background-color: #F6F9FB;
}

.a22 span,
p {
	margin-top: 10px;
}

.a22 .neir {
	margin-left: 50px;
}

.a23 {
	margin-top: 10px;
}

.a24 {
	margin-top: 10px;
}

.a24 .bang {
	display: inline-block;
	border: 3px #EDF0F5 solid;
	width: 50px;
	line-height: 40px;
	margin-left: 30px;
	text-align: center;
}

.a24 .bang:hover {
	border: 3px #FF4F0D solid;
}

.a25 {
	margin-top: 30px;
}

.a25 button {
	display: inline-block;
	width: 200px;
	height: 60px;
	border-radius: 30px;
	margin-left: 30px;
}

.a25 .a25color1 {
	background-color: #FFEEE8;
	color: #FF4F0D;
	font-size: 20px;
	font-weight: bolder;
	border: 1px #FF4F0D solid;
}

.a25 .a25color2 {
	background-color: #FF4F0D;
	color: white;
	font-size: 20px;
	font-weight: bolder;
	border: 1px #FF4F0D solid;
}
</style>